<template>
  <div class="userfile-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="个人资料编辑">
      <template #left>
        <span @click="$router.back()">
            <svg-icon icon-class="lazhu" style="margin-left: 10px" width="26px" height="26px" class="icon"/>
          </span>
      </template>
    </van-nav-bar>

    <div class="cellWarp">
      <!-- 上传控件 -->
      <input type="file" hidden ref="file" @change="onFileChange"/>

      <!-- 内容区域 -->
      <van-cell title="头像" is-link class="photo-cell" @click="$refs['file'].click()">
        <template #default>
          <van-image
            class="avatar"
            round
            fit="cover"
            :src="userInfo.user_pic"
          />
        </template>
      </van-cell>
      <van-cell title="昵称" is-link :value="userInfo.username" @click="isNameShow = true"/>
      <van-cell title="性别" is-link :value="userInfo.sex === 0 ? '男' : '女'" @click="isGanderShow = true"/>
      <van-cell title="生日" is-link :value="userInfo.birthday" @click="isBirthdayShow = true"/>
      <van-cell title="所在地" is-link :value="userInfo.area" @click="isAreaShow = true"/>
      <van-cell title="恋爱宣言" is-link @click="isSignatureShow = true"/>
      <van-cell title="修改密码" is-link @click="isPwdShow = true"/>
    </div>

    <!-- 头像弹框 -->
    <van-popup v-model="isPhotoShow" position="bottom" :style="{ height: '100%' }">
      <avatar-edit v-if="isPhotoShow" :img="img" @close="isPhotoShow = false"
                   :avatar.sync="userInfo.user_pic"></avatar-edit>
    </van-popup>

    <!-- 昵称弹框 -->
    <van-popup v-model="isNameShow" position="bottom" style=" height: 100%; background-color: #eeeeee;">
      <name-edit v-if="isNameShow" :userName.sync="userInfo.username" @close="isNameShow = false"></name-edit>
    </van-popup>

    <!-- 密码弹框 -->
    <van-popup v-model="isPwdShow" position="bottom" style=" height: 100%; background-color: #eeeeee;">
      <pwd-edit v-if="isPwdShow" :userPwd.sync="userInfo.password" @close="isPwdShow = false"></pwd-edit>
    </van-popup>

    <!-- 性别弹框 -->
    <van-popup v-model="isGanderShow" position="bottom">
      <gander-edit v-if="isGanderShow" :userGander.sync="userInfo.sex" @close="isGanderShow = false"></gander-edit>
    </van-popup>

    <!-- 生日弹框 -->
    <van-popup v-model="isBirthdayShow" position="bottom">
      <birthday-edit v-if="isBirthdayShow" :userBirthday.sync="userInfo.birthday"
                     @close="isBirthdayShow = false"></birthday-edit>
    </van-popup>

    <!-- 所在地弹框-->
    <van-popup v-model="isAreaShow" position="bottom">
      <area-edit v-if="isAreaShow" :userArea.sync="userInfo.area" @close="isAreaShow = false"></area-edit>
    </van-popup>

    <!-- 恋爱宣言弹框 -->
    <van-popup v-model="isSignatureShow" position="bottom" style=" height: 100%; background-color: #eeeeee;">
      <signature-edit v-if="isSignatureShow" :userSignature.sync="userInfo.signature"
                      @close="isSignatureShow = false"></signature-edit>
    </van-popup>
  </div>
</template>

<script>

import { getUserInfoAPI } from '@/api'
import AvatarEdit from './components/avatar-edit.vue'
import NameEdit from './components/name-edit.vue'
import GanderEdit from './components/gander-edit.vue'
import BirthdayEdit from './components/birthday-edit.vue'
import AreaEdit from './components/area-edit.vue'
import PwdEdit from './components/pwd-edit.vue'
import SignatureEdit from './components/signature-edit.vue'

export default {
  name: 'UserfileIndex',
  components: {
    AvatarEdit,
    NameEdit,
    GanderEdit,
    BirthdayEdit,
    AreaEdit,
    PwdEdit,
    SignatureEdit
  },

  data () {
    return {
      userInfo: {},
      img: null,
      isPhotoShow: false, // 头像弹框状态
      isNameShow: false, // 昵称弹框状态
      isGanderShow: false, // 性别弹框状态
      isBirthdayShow: false, // 生日弹框状态
      isAreaShow: false,
      isPwdShow: false,
      isSignatureShow: false
    }
  },

  created () {
    // 调用获取个人资料方法
    this.loadGetUserProfile()
  },

  methods: {
    // 上传图片完成后
    onFileChange () {
      // 将输入框中的图片存储到数据中
      // 1. 获取文件对象
      const file = this.$refs.file.files[0]
      // 2. 基于文件对象转化为 blob数据
      this.img = window.URL.createObjectURL(file)
      // 3. 每次获取完成图片后要清空文件上传框中的数据
      this.$refs.file.value = ''
      // 开启弹框
      this.isPhotoShow = true
    },

    // 获取用户个人资料
    async loadGetUserProfile () {
      try {
        const { data: res } = await getUserInfoAPI()
        // res.gender 性别 0-男， 1-女
        console.log(res)
        this.userInfo = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.userfile-container {
  height: 100vh;
  background-image: url(@/assets/userinfoBg.jpg);
  background-size: cover;

  .van-nav-bar {
    padding: 15px 0;
    font-size: 16px;
    letter-spacing: 2px;
  }

  .cellWarp {
    width: 100%;

    .van-cell {
      width: 90%;
      height: 50px;
      background-color: rgba(255, 255, 255, .5);
      box-shadow: 5px 3px 3px #1b1f23;
      align-items: center;
      margin: 15px auto;
      border-radius: 30px;
    }
  }

  .photo-cell {
    align-items: center;

    .avatar {
      width: 30px;
      height: 30px;
    }

    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}
</style>
